Files that changed from the base of the PR and between c8c9638 and 8527bf8.

• packages/editor/src/core/components/editors/document/collaborative-editor.tsx (3 hunks)
• packages/editor/src/core/components/editors/document/collaborative-read-only-editor.tsx (3 hunks)
• packages/editor/src/core/components/editors/document/index.ts (1 hunks)
• packages/editor/src/core/components/editors/document/loader.tsx (1 hunks)
• packages/editor/src/core/hooks/use-collaborative-editor.ts (4 hunks)
• packages/editor/src/core/hooks/use-read-only-collaborative-editor.ts (4 hunks)

packages/editor/src/core/components/editors/document/index.ts (1)

3-3: LGTM!

The change is adding a new export statement for the loader module, which is consistent with the existing export statements in the file. This change enhances the module's interface by allowing consumers to import functionalities from the loader module directly via the index.ts file, thereby improving the modularity and usability of the codebase. The other existing exports remain unchanged, maintaining the current functionality of the collaborative and read-only editors.

packages/editor/src/core/components/editors/document/loader.tsx (1)

4-42: Excellent work on the DocumentContentLoader component!

The component is well-structured and follows a consistent design pattern. The use of the Loader component from the @plane/ui library and the arrangement of Loader.Item elements effectively simulate the expected content layout. The varying widths and heights of the loader items, along with the use of flexbox and spacing classes, create a responsive and visually appealing loader UI.

Some key highlights:

• The component is wrapped in a div with appropriate classes for sizing and padding.
• The loader items are grouped into sections to represent different content blocks like headings, paragraphs, and icons with text.
• The use of space-y-4 and space-y-2 classes provides consistent vertical spacing between the loader items.
• The relative class on the Loader component ensures proper positioning of the loader items.

Overall, the DocumentContentLoader component effectively enhances the user experience by providing a visually engaging loading state that mimics the expected content layout. Great job!

packages/editor/src/core/components/editors/document/collaborative-read-only-editor.tsx (3)

3-3: LGTM!

The DocumentContentLoader component is correctly imported from @/components/editors to provide a loading state.

---

38-38: LGTM!

The useReadOnlyCollaborativeEditor hook now returns hasServerConnectionFailed and hasServerSynced properties to handle server connection states. This change aligns with the component's enhanced functionality to provide visual feedback during the loading state and handle connection failures.

---

55-56: LGTM!

The component now conditionally renders the DocumentContentLoader when the server has not synced and there has been no connection failure. This change improves the user experience by providing visual feedback during the loading state while maintaining the previous behavior of returning null if the editor instance is not available.

packages/editor/src/core/components/editors/document/collaborative-editor.tsx (3)

3-3: LGTM!

The import statement change looks good. It aligns with the PR objective of adding a loader for the collaborative editor.

---

45-45: LGTM!

The change to the useCollaborativeEditor hook's return value looks good. The additional states hasServerConnectionFailed and hasServerSynced will be useful for handling the loading and error states as per the PR objective.

---

70-71: Great work on implementing the loading state!

The conditional rendering logic for the DocumentContentLoader looks perfect. It directly addresses the PR objective by showing the loader when the server has not synced yet and there are no connection failures.

This change enhances the user experience by providing visual feedback during the loading process, ensuring that users are informed that the document is being prepared for editing. It fills the gap of not having a loading state previously.

packages/editor/src/core/hooks/use-read-only-collaborative-editor.ts (5)

23-25: LGTM!

The new state variables are correctly initialized using the useState hook with appropriate initial values. The naming is clear and indicates their purpose.

---

34-37: LGTM!

The onAuthenticationFailed callback is correctly added to the provider configuration. It appropriately handles the authentication failure scenario by triggering the error handler and updating the hasServerConnectionFailed state.

---

40-43: LGTM!

The modification to the onClose callback is logically correct. It appropriately checks for the specific error code (1006) before triggering the error handler and updating the hasServerConnectionFailed state.

---

45-45: LGTM!

The onSynced callback is correctly added to the provider configuration. It appropriately updates the hasServerSynced state to true when the editor successfully syncs with the server.

---

79-83: LGTM!

The return statement of the hook is correctly updated to include the new state variables, hasServerConnectionFailed and hasServerSynced. This allows components that use this hook to access the server connection and sync status.

packages/editor/src/core/hooks/use-collaborative-editor.ts (5)

32-34: LGTM!

The new state variables are correctly initialized using the useState hook. The naming is clear and the initial values are appropriate.

---

44-47: LGTM!

The onAuthenticationFailed callback correctly updates the hasServerConnectionFailed state and invokes the onServerError callback to handle the error.

---

50-53: LGTM!

The onClose callback correctly updates the hasServerConnectionFailed state when the connection is closed with the specific event code and invokes the onServerError callback to handle the error.

---

55-55: LGTM!

The onSynced callback correctly updates the hasServerSynced state when the editor synchronizes with the server.

---

105-109: LGTM!

The return statement correctly includes the new state variables, allowing components that use this hook to access the server connection and synchronization status.